<template>
  <div class="contain-edit">
    <div class="header">
      <p>查看详情</p>
      <el-button class="link" type="primary">
        <router-link to="/houseList" style="color: #fff;">返回</router-link>
      </el-button>
    </div>
    <div class="main">
      <div class="list">
        <div class="title">房源信息</div>
        <div class="flex-box-container">
          <div class="item flex">
            <div class="item-key">小区:</div>
            <div class="item-value">{{ info && info.gardenName ? info.gardenName : ''}}</div>
          </div>
          <div class="item flex">
            <div class="item-key">单元:</div>
            <div class="item-value">{{ info && info.unitName ? info.unitName : ''}}</div>
          </div>
        </div>
        <div class="flex-box-container">
          <div class="item flex">
            <div class="item-key">楼栋:</div>
            <div  class="item-value" >{{ info && info.buildName ? info.buildName : ''}}</div>
          </div>
          <div class="item flex">
            <div class="item-key">楼层:</div>
            <div  class="item-value" >{{ info && info.floor ? info.floor : ''}}</div>
          </div>
        </div>
        <div class="flex-box-container">
          <div class="item flex">
            <div class="item-key">房间:</div>
            <div  class="item-value" >{{ info && info.roomNo ? info.roomNo : ''}}</div>
          </div>
          <div class="item flex">
            <div class="item-key">户型:</div>
            <div  class="item-value" >{{ info && info.roomType ? info.roomType : ''}}</div>
          </div>
        </div>
        <div class="flex-box-container">
          <div class="item flex">
            <div class="item-key">房租:</div>
            <div  class="item-value" >{{ info && info.rentalRentprice ? info.rentalRentprice : ''}}</div>
          </div>
        </div>
        <div class="flex-box-container">
          <div class="item flex">
            <div class="item-key">房东:</div>
            <div  class="item-value" >{{ info && info.landlordName ? info.landlordName : ''}}</div>
          </div>
          <div class="item flex">
            <div class="item-key">配套设施:</div>
            <div  class="item-value" >{{ info && info.houseAllocate ? info.houseAllocate : ''}}</div>
          </div>
        </div>
        <div class="item">
          <div class="item-key">配置:</div>
          <div  class="item-value" >{{ info && info.publicAllocate ? info.publicAllocate : ''}}</div>
        </div>
        <div class="item" style="min-height: 150px">
          <div class="item-key" style="height: 150px;line-height: 150px;">房源图:</div>
          <div  class="item-value" style="height: 150px;line-height: 150px;">
            <div class="flex-box-container" style="margin-top: 15px;">
              <div :style="{backgroundImage: 'url('+item+')'}" style="width: 120px;height: 120px;margin-right: 15px;background-size: cover" v-for="(item, index) in info.images" :key="index">

              </div>
            </div>
          </div>
        </div>
        <div class="flex-box-container">
          <div class="item flex">
            <div class="item-key">朝向:</div>
            <div  class="item-value" >{{ info && info.toward ? info.toward : ''}}</div>
          </div>
          <div class="item flex">
            <div class="item-key">房源状态:</div>
            <div  class="item-value" >{{ info && info.houseStatusText ? info.houseStatusText : ''}}</div>
          </div>
        </div>
        <div class="item" style="min-height: 100px">
          <div class="item-key" style="height: 100px;line-height: 100px;">房源介绍:</div>
          <div  class="item-value" style="height: 100px;line-height: 100px;">{{ info && info.memo ? info.memo : ''}}</div>
        </div>
      </div>
      <div style="height: 20px;"></div>
      <div class="list" v-if="identify == 0 && show">
        <div class="title">租客信息</div>
        <div class="flex-box-container">
          <div class="item flex">
            <div class="item-key">房客:</div>
            <div class="item-value">{{ rentDetail && rentDetail.renterName ? rentDetail.renterName : ''}}</div>
          </div>
          <div class="item flex">
            <div class="item-key">性别:</div>
            <div class="item-value">{{ rentDetail && rentDetail.renterSexText ? rentDetail.renterSexText : ''}}</div>
          </div>
        </div>
        <div class="flex-box-container">
          <div class="item flex">
            <div class="item-key">身份证号:</div>
            <div  class="item-value" >{{ rentMaster && rentMaster.idCardNo ? rentMaster.idCardNo : ''}}</div>
          </div>
          <div class="item flex">
            <div class="item-key">联系方式:</div>
            <div  class="item-value" >{{ rentMaster && rentMaster.mobile ? rentMaster.mobile : ''}}</div>
          </div>
        </div>
        <div class="flex-box-container">
          <div class="item flex">
            <div class="item-key">紧急联系人:</div>
            <div  class="item-value" >{{ rentDetail && rentDetail.renterEmergencycontact ? rentDetail.renterEmergencycontact : ''}}</div>
          </div>
          <div class="item flex">
            <div class="item-key" style="white-space: nowrap">紧急联系人电话:</div>
            <div  class="item-value" >{{ rentDetail && rentDetail.renterEmergencymobile ? rentDetail.renterEmergencymobile : ''}}</div>
          </div>
        </div>
        <div class="item" style="min-height: 150px">
          <div class="item-key" style="height: 150px;">房客身份证正反面照片:</div>
          <div  class="item-value" style="height: 150px;line-height: 150px;">
            <div class="flex-box-container" style="margin-top: 15px;">
              <div style="width: 120px;margin-right: 15px; display: flex">
                <img :src="rentMaster.idcard1" alt="" style="width: 100%;height: 100%;">
                <img :src="rentMaster.idcard2" alt="" style="width: 100%;height: 100%;">
              </div>
              <!--<div :style="{backgroundImage: 'url('+rentMaster.idcard1+')'}" style="width: 120px;height: 120px;margin-right: 15px;background-size: cover">-->

              <!--</div>-->
              <!--<div :style="{backgroundImage: 'url('+rentMaster.idcard2+')'}" style="width: 120px;height: 120px;margin-right: 15px;background-size: cover">-->

              <!--</div>-->
            </div>
          </div>
        </div>
        <div class="flex-box-container">
          <div class="item flex">
            <div class="item-key">租客类型:</div>
            <div  class="item-value" >{{ rentDetail && rentDetail.rentalTypeText ? rentDetail.rentalTypeText : ''}}</div>
          </div>
          <div class="item flex">
            <div class="item-key">入住时间:</div>
            <div  class="item-value" >{{ rentDetail && rentDetail.rentalCheckin ? rentDetail.rentalCheckin : ''}}</div>
          </div>
        </div>
        <div v-for="(item, index) in rentPartnerList" :key="index">
          <div class="flex-box-container">
            <div class="item flex">
              <div class="item-key">同住人:</div>
              <div  class="item-value" >{{ item && item.name ? item.name : ''}}</div>
            </div>
            <div class="item flex">
              <div class="item-key">同住人性别:</div>
              <div  class="item-value" v-if="item && item.sex">
                <div v-if="item.sex == 'female'">女性</div>
                <div v-else-if="item.sex == 'male'">男性</div>
                <div v-else-if="item.sex == 'unknow'">中性</div>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="item-key">同住人联系方式:</div>
            <div  class="item-value" >{{ item && item.mobile ? item.mobile : ''}}</div>
          </div>
          <div class="item" style="min-height: 150px">
            <div class="item-key" style="height: 150px;">同住人身份证正反面照片:</div>
            <div  class="item-value" style="height: 150px;line-height: 150px;">
              <div class="flex-box-container" style="margin-top: 15px;">
                <div style="width: 120px;margin-right: 15px; display: flex">
                  <img :src="item.idcard1" alt="" style="width: 100%;height: 100%;">
                  <img :src="item.idcard2" alt="" style="width: 100%;height: 100%;">
                </div>
                <!--<div :style="{backgroundImage: 'url('+item.idcard2+')'}" style="width: 120px;height: 120px;margin-right: 15px;background-size: cover">-->

                <!--</div>-->
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  let CONSTANT = require('../../constant/constant.js');
  let common = require("../../common.js");

  export default {
    data() {
      return {
        id:'',
        info: {
          unitName: "",
          buildName: "",
          landlordName: "",
          floor: "",
          roomNo: "",
          roomType: "",
          customHouseNo: "",
          longRent: "",
          houseAllocate: "",
          publicAllocate: "",
          houseStatusText: "",
          toward: "",
          memo: "",
          gardenName: "",
          images: "",
          rentalRentprice: "",
        },
        identify: "",
        rentDetail: {
          renterName: "",
          renterSexText: "",
          renterMobile: "",
          renterEmergencycontact: "",
          renterEmergencymobile: "",
          rentalTypeText: "",
          rentalCheckin: "",
          rentalTypeText: ""
        },
        rentMaster: {
          idCardNo: "",
          idcardkey1: "",
          idcardkey2: "",
          name: "",

        },
        rentPartnerList: [],
        show: false,
      }
    },
    mounted() {
      this.id  = this.$router.currentRoute.query.id;
      this.identify = sessionStorage.getItem("identify")
      this.getDetail(this.id);
      if (this.identify == 0) {
        this.getRentDetail()
      }
    },
    methods: {

      getDetail(id){
        let url = CONSTANT.URL.HOUSE.DETAIL;
        let param = {
          id:id
        };
        common.requestAjax(url,{},param,(res)=>{
          this.loading = false;
          this.info = res.data.bussData;
        })
      },
      getRentDetail() {
        let url = CONSTANT.URL.L_RENTAL.HOUSEDETAIL
        common.requestAjax(url, {}, {houseId: this.id}, (data) => {
          if (data.status == 200) {
            this.show = true
            this.rentDetail = data.data.bussData;
            this.rentDetail.rentalRenters.map( item => {
              if (item.renterType == "major") {
                this.rentMaster = item;
              }

              if (item.renterType == "partner") {
                this.rentPartnerList.push(item)
              }
            })
          } else {
            this.show = false
          }
        })
      }
    },
  }
</script>
<style lang="scss" scoped>
  .item-left {
    float: left;
    width: 120px;
    padding-left: 20px;
    padding-right: 10px;
    // height: 40px;
    line-height: 40px;
    text-align: right;
    border-right: 1px solid #dedede;
  }
  .item-right {
    // height: 40px;
    // line-height: 40px;
    padding-left: 20px;
    float: left;
  }
  .backage {
    height: auto;
    border: 1px solid #dedede;
    border-top: none;
  }
  .analyse{
    margin-left: 151px;
    height:530px;
    padding-top: 20px;
    display: flex;
  }
  .pic{
    width:330px;
    height:530px;
    // background-color:yellowgreen;
    display: inline-block;
    margin-right: 30px;
    padding-left: 20px;
    .avatar-info{
      .avatar{
        width:100px;
        height:100px;
        background-color:#626262;
        margin-top:50px;
        border-radius:50%;
        float:left;
        .avatar-img{
          width: 100%;
          height: 100%;
        }
      }
      .info{
        // float:left;
        // margin-top:50px;
        margin-left:10px;
        padding: 60px 20px;
      }
    }
  }
  .pic-font{
    border-left: 5px solid #999;
    width: 100px;
    height: 40px;
    line-height: 40px;
    // background-color: pink;
    // margin-left: 15px;
    margin-bottom: 15px;
    display: block;
  }
  .wins{
    display: inline-block;
    height: 350px;
    flex: 1;
  }
  .match{
    list-style:none;
    padding-left:20px;
    margin-top:20px;
    .match-item{
      width: 300px;
      height:50px;
      background-color: #eee;
      margin-bottom:30px;
    }
  }
  #chart{
    width:300px;
    height:300px;
  }
  .honor {
    float: left;
    width: 150px;
    height: 150px;
    margin-right: 20px;
    // background-color: yellow;
    .honor-img{
      width: 70px;
      height: 70px;
      padding: 30px 40px 0px 40px;
    }
    .honor-span{
      width: 40px;
      height: 20px;
      border: 1px solid #ccc;
      display: block;
      margin-left: 55px;
    }
    .honor-text{
      display: block;
      text-align: center;
      font-size: 14px;
    }
  }

</style>


